import ProForm, {
  ModalForm,
  ProFormSelect,
  ProFormText,
  ProFormTextArea,
} from '@ant-design/pro-form';
import { Button, message } from 'antd';

import { request } from 'umi';
import { PlusOutlined, AlertOutlined, DeleteOutlined } from '@ant-design/icons';
import { api } from '@/global';

type deptTyp = {
  id: string;
  deptName: string;
};

type ProfessionType = {
  id: number;
  professionalName: string;
  professionalDesc: string;
  professionalCode: string;
  deptId: string;
  deptName: string;
  courseNumber: number;
  userNumber: number;

  professionalNumber: number;
};

export default (props: any) => {
  return (
    <ModalForm
      title="新增专业"
      key="id"
      autoFocusFirstInput
      modalProps={{
        destroyOnClose: true,
        onCancel: () => console.log('run'),
      }}
      onFinish={async (values) => {
        const result = await request.post(api.insertProfessional, {
          data: values,
        });

        if (result.success) {
          message.info('添加成功');
          props.reloadPage();
          return true;
        } else {
          message.error('添加失败,请联系管理员');
          return false;
        }
      }}
      trigger={
        <Button title="新增系别" type="primary">
          <PlusOutlined />
          新增专业
        </Button>
      }
    >
      <ProForm.Group>
        <ProFormText
          width="sm"
          name="professionalName"
          label="专业名称"
          rules={[
            {
              required: true,
              message: '请输入专业名称',
            },
          ]}
        />
        <ProFormText
          width="sm"
          name="professionalCode"
          label="专业编号"
          rules={[
            {
              required: true,
              message: '请输入专业编号',
            },
          ]}
        />
        <ProFormSelect
          width="sm"
          name="deptId"
          label="专业编号"
          rules={[
            {
              required: true,
              message: '请选择系部',
            },
          ]}
          request={async () => {
            const deptData = await request(api.getAllDept, {});
            const list: any[] = [];

            deptData.data.map((item: deptTyp) => {
              list.push({
                label: item.deptName,
                value: item.id,
              });
            });

            return list;
          }}
        />
      </ProForm.Group>
      <ProFormTextArea
        name="professionalDesc"
        label="专业描述"
        placeholder="请输入具体的专业描述"
      />
    </ModalForm>
  );
};
